<template>
  <div>
    <!-- 查询表单 -->
    <a-form-model :model="searchForm"
                  :rules="rules"
                  ref="proValueFormRef"
                  :label-col="labelCol"
                  :wrapper-col="wrapperCol"
                  labelAlign="left">
      <a-row :gutter="16">
        <a-col :md="12"
               :lg="12"
               :xl="12"
               :xxl="8">
          <a-form-model-item :label="inputLabel"
                             :colon="false"
                             prop="proValue">
            <a-input-number :default-value="10"
                            :min="0"
                            :max="100"
                            v-model="searchForm.proValue"
                            :formatter="value => `${value}%`"
                            :parser="value => value.replace('%', '')" />
          </a-form-model-item>
        </a-col>
        <a-col :md="12"
               :lg="12"
               :xl="12"
               :xxl="8">
          <a-form-model-item :wrapper-col="{ span: 24 }"
                             class="top-widget-btn">
            <a-button type="primary"
                      :loading="btnLoading"
                      icon="save"
                      shape="round"
                      @click="save">提交</a-button>
            <a-button @click="reset"
                      shape="round"
                      icon="retweet">重置</a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- 说明 -->
    <div>
      <a-descriptions title="说明">
        <a-descriptions-item label="">
          <slot name="descriptions"></slot>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>
<script>
import { InputNumber, FormModel, Row, Col, Button, Descriptions } from 'ant-design-vue'
import { queryHnConfigList, updateByPrimaryKeySelective } from '@/request/api/ruleConfig/generalRules'
const { Item: DescriptionsItem } = Descriptions
export default {
  name: 'tabContent',
  components: {
    AInputNumber: InputNumber,
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    ARow: Row,
    ACol: Col,
    AButton: Button,
    ADescriptions: Descriptions,
    ADescriptionsItem: DescriptionsItem
  },
  props: {
    ruleType: { // tab类型
      type: String,
      default: '1',
      required: true
    },
    // 表单label
    inputLabel: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      // 顶部搜索表单
      searchForm: {
        proValue: 10 // 比例
      },
      // 表单布局
      labelCol: { span: 16 },
      wrapperCol: { span: 8 },
      btnLoading: false,
      rules: {
        proValue: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    ruleType: {
      immediate: true,
      handler: function (ruleType) {
        this.btnLoading = false
        if (ruleType === '1') {

        } else if (ruleType === '2') {

        }
        this.setCurrProValue({ ruleType })
      }
    }
  },
  methods: {
    // 设置当前输入框的比例值
    setCurrProValue ({ ruleType }) {
      queryHnConfigList({ type: ruleType }).then((res) => {
        if (res.code === '0') {
          this.searchForm.proValue = res.data[0].value
          this.searchForm.id = res.data[0].id
        }
      })
    },
    // 提交
    async save () {
      if (this.ruleType === '1') { // 国网总表
      }
      if (this.ruleType === '2') { // 产排比例范围
      }
      this.$refs.proValueFormRef.validate(async valid => {
        if (valid) {
          this.btnLoading = true
          await updateByPrimaryKeySelective({
            type: this.ruleType,
            value: this.searchForm.proValue + '',
            id: this.searchForm.id
          }).then((res) => {
            if (res.code === '0') {
              this.$message.success('更新成功')
            } else {
              // 得到原来的
              this.setCurrProValue({ ruleType: this.ruleType })
            }
          }).catch(() => {
            // 得到原来的
            this.setCurrProValue({ ruleType: this.ruleType })
          })
          this.btnLoading = false
        }
      })
    },
    // 重置
    reset () {
      this.searchForm.proValue = 10
      this.save()
    }
  }
}
</script>
<style lang="scss">
</style>
